<!--
@description: FieldVideo.vue
@author: liujiabin01
@time:2025/5/6 17:07
-->
<template>
  <van-field class="van-field-video" :label="label"  :required="required" :rules="rules" :disabled="disabled">
    <template #input>
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="options"/>
    </template>
  </van-field>
</template>

<script>
// 视频插件
import {videoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  name: 'FieldVideo',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    videoPlayer
  },
  props: {
    label: {
      type: String
    },
    value: {
      type: String
    },
    poster: {
      type: String
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    options () {
      let videoUrl = this.value || ''
      console.error(videoUrl, 'videoUrl')
      return {
        color: '#409eff', // 主题色
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          // type: "video/mp4", // 类型
          // src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' // url地址
          src: videoUrl // 视频源
        }],
        poster: this.poster, // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  }
};

</script>
<style>
.van-field-video{
  width: 100%;
}
.van-field-video .van-field__body,
.van-field-video .van-field__control,
.van-field-video .video-player{
  width: 100%;
}
.van-field-video .video-player{
  width: 100%;
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.van-field-video .video-player .video-js .vjs-big-play-button{
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
</style>
